<template>
  <div class="content-shape-strip">
    <div class="label">{{ subscribedRes }}</div>
  </div>
</template>

<script>
import API from "@/api/overview";

export default {
  name: "o6-strip",
  // props: {
  //   subscribedRes: {
  //     type: Number,
  //     default: 0,
  //   },
  // },
  data() {
    return {
      timer: null,
      subscribedRes: 0,
    };
  },
  methods: {
    getSubscribedRes() {
      let handleV1 = (res) => (this.subscribedRes = res.data.body.data[0].dyzl);
      API.getBox6_v1().then(handleV1);
    },
    getTask() {
      return () => {
        this.getSubscribedRes();
      };
    },
  },
  mounted() {
    this.getTask()(); // 先执行 一次任务
    this.timer = setInterval(this.getTask(), 30000); // 设置周期触发任务
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
};
</script>

<style lang="less" scoped>
.content-shape-strip {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  .label {
    width: 50%;
    color: #c47958;
    border-radius: 24px;
    font-size: 24px;
    background: #ffffff;
    box-shadow: 0 1px 3px #fb9c46 inset;
  }
  height: 60px;
  background: url(../../../assets/img/overview/shape-strip.jpg);
  background-size: 100% 100%;
}
</style>
